@import '../stylesheets/base.scss';

.empty {
    width: 5rem;
    height: 5rem;
    &-m {
        width: 15rem;
    }
}
.kss-container {
    height: 10em; 
}
.kss-content {
    &:before {
        content: "lorem ipsum";
        color: #111;
    }
}
.debug {
    border: 1px solid red;
}

.progress {
    background: $color-white;
    width: 15rem;
    height: 2rem;
    &-bar {
        width: 0;
        transition: all 0.4s ease-out;
    }
    &-start {
        bakground-color: #f36d0a;
        background: -webkit-linear-gradient(left, yellow, green); 
        background: -o-linear-gradient(right, yellow, green); 
        background: -moz-linear-gradient(right, yellow, green);
        background: linear-gradient(to right, yellow, green);
        transition: all 0.8s linear;
        height: 2rem;
        width: 15rem;
    }

}

.background {
    &-black {
        background-color: #121212;
    }
    &-white {
        background-color: #fefefe;
    }
}

.bkpt {
    @extend .empty;
    @extend .debug;
    @extend .kss-content;
    &-s {
        width: $bkpt-s;
        &:before {
            content: "$bkpt-s";
        }
    }
    &-m {
        width: $bkpt-m;
        &:before {
            content: "$bkpt-m";
        }
    }
    &-l {
        width: $bkpt-l;
        &:before {
            content: "$bkpt-l";
        }
    }
}

.background {
    @extend .empty-m;
    &-tab {
        color: $background-tab;
        &--active {
            @extend .background-black;
           color: $background-tab--active;
        }
        &--item {
           color: $background-tab--item;
        }
    }
}

.color {
    @extend .empty-m;
    &-white {
        @extend .background-black;
        color: $color-white;
    }
    &-black {
        color: $color-black; 
    }
    &-tabname {
        color: $color-tabname;
    }
    &-twitch {
        color: $color-twitch;
    }
    &-kageshi {
        @extend .background-black;
        color: $color-kageshi;
    }
    &-action {
        &--add {
            color: $color-action--add;
        }
    }
    &-status {
        &--error {
            color: $color-status--error;
        }
        &--active {
            color: $color-status--active;
        }
    }
    &-tab {
        &--item {
            @extend .background-black;
            color: $color-tab--item;
        } 
    }
}
